import React from "react";
import { Card, Row, Col } from "antd";

import "./index.less";

interface SonProps {
	sonText1: string;
	fatherFunc(sonValue: string): void;
}

interface SonStates {
	sonText1: string;
}

interface FatherProps {
	fatherText1: string;
}

interface FatherStates {
	fatherText1: string;
	receiverSonValue1: string;
}

class Son extends React.Component<SonProps, SonStates> {
	constructor(props: SonProps, state: SonStates) {
		super(props, state);
		this.state = {
			sonText1: "",
		};
	}

	changeHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
		e.persist();
		this.props.fatherFunc(e.target.value);
	};

	render() {
		return (
			<div>
				<Col span={24}>
					<h2>子组件接收父组件的值</h2>
					<span>{this.props.sonText1}</span>
				</Col>
				<Col span={24}>
					<h2>子组件传值</h2>
					<input onChange={this.changeHandle} />
				</Col>
			</div>
		);
	}
}

class NormalFormPage extends React.Component<FatherProps, FatherStates> {
	modalForm: any;

	constructor(props: FatherProps, state: FatherStates) {
		super(props, state);
		this.state = {
			fatherText1: "",
			receiverSonValue1: "",
		};
	}

	handleText1 = (e: React.ChangeEvent<HTMLInputElement>) => {
		e.persist();
		this.setState({
			fatherText1: e.target.value,
		});
	};

	getSonValue = (sonValue: string) => {
		this.setState({
			receiverSonValue1: sonValue,
		});
	};

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>父子组件传参</h1>
				</div>

				<Card title={`父组件`}>
					<Row>
						<Col span={24}>
							<h2>父组件传值给子组件</h2>
							<div>
								<input onChange={this.handleText1}></input>
							</div>
						</Col>
						<Col span={24}>
							<h2>父组件接收子组件的值</h2>
							<div>
								<span>{this.state.receiverSonValue1}</span>
							</div>
						</Col>
					</Row>
				</Card>

				<Card title={`子组件`}>
					<Row>
						<Son sonText1={this.state.fatherText1} fatherFunc={this.getSonValue} />
					</Row>
				</Card>
			</div>
		);
	}
}

export default NormalFormPage;
